<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="form" :model="listQuery" label-width="80px" style="display: inline;width:800px">
        <div style="display: flex;">
          <el-form-item label="用户名:">
            <el-input
              v-model="listQuery.title"
              placeholder="Title"
              style="width: 240px;"
              class="filter-item"
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item label="手机号码:">
            <el-input
              v-model="listQuery.title"
              placeholder="Title"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item label="配送时间">
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  v-model="listQuery.date1"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">--</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker v-model="listQuery.date2" placeholder="选择时间" style="width: 100%;"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label=" 状态:">
            <el-select
              v-model="listQuery.importance"
              placeholder="Imp"
              clearable
              style="width: 90px"
              class="filter-item"
            >
              <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-row>
            <el-button
              type="primary"
              class="filter-item"
              icon="el-icon-search"
              @click="handleFilter"
            >查询</el-button>
            <el-button
              type="info"
              class="filter-item"
              icon="el-icon-download"
              @click="handleDownload"
            >导出</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border=""
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="用户名" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作记录" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      importanceOptions: [1, 2, 3],
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total

      //   // Just to simulate the time of the request
      //   setTimeout(() => {
      //     this.listLoading = false
      //   }, 1.5 * 1000)
      // })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      // import('@/vendor/Export2Excel').then(excel => {
      //   const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
      //   const filterVal = [
      //     'timestamp',
      //     'title',
      //     'type',
      //     'importance',
      //     'status'
      //   ]
      //   const data = this.formatJson(filterVal)
      //   excel.export_json_to_excel({
      //     header: tHeader,
      //     data,
      //     filename: 'table-list'
      //   })
      //   this.downloadLoading = false
      // })
    },
    // formatJson(filterVal) {
    //   return this.list.map(v =>
    //     filterVal.map(j => {
    //       if (j === 'timestamp') {
    //         return parseTime(v[j])
    //       } else {
    //         return v[j]
    //       }
    //     })
    //   )
    // }
  }
}
</script>
<style lang='scss' scoped>
.app-container {
  .filter-container {
    padding-right: 20px;
    .el-form-item {
      margin-bottom: 0 !important;
    }
  }
}
</style>
